﻿@page "/Slider"

@using FluentUI.Demo.Shared.Pages.Slider.Examples

<PageTitle>@App.PageTitle("Slider")</PageTitle>

<h1>Slider</h1>


<p>As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/slider/" target="_blank" rel="noopener noreferrer">W3C</a>:</p>
<blockquote>
    <p>
        A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar, rail, or track to change the value of the slider.
    </p>
</blockquote>

<p>
    An implementation of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/range" target="_blank" rel="noopener noreferrer">range slider</a>.
    Note that if the slider is in vertical orientation by default the component will get a height using the css var <code>--fluent-slider-height</code>, by default that equates to <code>(10px * var(--thumb-size))</code>
    or 160px. Inline styles will override that height.
</p>
<p>
    The <code>&lt;FluentSlider&gt;</code> uses the <code>&lt;FluentSliderLabel&gt;</code> component for the labels shown.
</p>
<p>
    <code>&lt;FluentSlider&gt;</code> wraps the <code>&lt;fluent-slider&gt;</code> element, a web component implementation of a range slider leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<div style="display: flex; flex-direction: column; justify-content: space-evenly; width: 750px;">
    <DemoSection Title="Toggle orientation" Component="@typeof(SliderToggle)"></DemoSection>

    <DemoSection Title="Value is of type double" Component="@typeof(SliderDouble)"></DemoSection>

    <DemoSection Title="Vertical slider" Component="@typeof(SliderVertical)"></DemoSection>

    <DemoSection Title="Labels" Component="@typeof(SliderLabels)"></DemoSection>

    <DemoSection Title="Thumbs" Component="@typeof(SliderThumbs)"></DemoSection>

    <DemoSection Title="States" Component="@typeof(SliderStates)"></DemoSection>

</div>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentSlider<>)" InstanceTypes="@(new[] {typeof(int)})" GenericLabel="TValue">
    <Description>
        <code>TValue</code> can be one of the following <code>Type</code>'s:
        <ul>
            <li><code>int</code></li>
            <li><code>long</code></li>
            <li><code>short</code></li>
            <li><code>float</code></li>
            <li><code>double</code></li>
            <li><code>decimal</code></li>
        </ul>
    </Description>
</ApiDocumentation>

<ApiDocumentation Component="typeof(FluentSliderLabel<>)" InstanceTypes="@(new[] {typeof(int)})" GenericLabel="TValue" />
